<template>
    <div class="dataBigScreenContainer" ref="dataBigScreenContainerRef" @click="toggleScreenChange">
      <!-- 加载中 -->
      <div class="loading" v-if="isLoading">
        <div class="load-box">
          <img src="@/assets/images/screen/loading.gif" /> 页面加载中...
        </div>
      </div>
      <!-- 加载完成 -->
      <div class="main-box" v-else>
        <!-- 头部区域 -->
        <div class="headerSection" ref="headRef" v-show="isShowHeader">
          <!-- 上半部分 -->
          <div class="head_t">
            <span>智慧物联网边缘计算指挥大屏</span>
            <p><dataHeadSvg class="dataHeadSvg"></dataHeadSvg></p>
          </div>
          <!-- 下半部分 -->
          <div class="head_b flex_between">
            <div class="head_b_left">
              <div class="between-item-1">
                <div class="content">Eternity - 陈波 - 前端开发工程师</div>
              </div>
              <div class="around-item-1">
                <BasicDateTime 
                  class="content"
                  :isShowWeekDay="false"
                  fz="0.7rem"
                />
              </div> 
            </div>
  
            <div class="head_b_right">
              <div class="around-item-2">
                <div class="content">Today is</div>
                <BasicDateTime
                  class="content weekDay"
                  fz="0.7rem"
                  :isShowDate="false"
                  :isShowTime="false"
                />
              </div>
              <div class="between-item-2">
                <!-- <div class="content">坚持数智驱动创新，打造行业智能制造标杆示范工厂</div> -->
                <div class="content">Data Dashboard - TD3</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 图表区域 -->
        <div class="bodySection">
          <transition name="fade" mode="out-in">
            <keep-alive>
              <component :is="currentComMark == '3D' ? index3D: index2D" />
            </keep-alive>
          </transition>
        </div>
  
      </div>
  
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, watch, shallowRef, onBeforeUnmount } from 'vue';
  import { showLoading, hideLoading } from '@/request/http'
  // svg
  import dataHeadSvg from '@/assets/images/svg/dataHead.svg'
  // components
  import index3D from './components/3D/index3D.vue';
  import index2D from './components/2D/index2D.vue';
  // api
  import dataSourceApi from '@/request/api/dataSource';
  // store
  import useDataScreen from '@/store/dataScreen';
  
  const dataScreenStore = useDataScreen();
  
  let isLoading = ref<boolean>(true);
  type TDeviceNum = 10 | 20 | 40 | 60 | 80 | 100;
  let deviceNum = ref<TDeviceNum>(10);
  // no_lstm
  const deviceNums: TDeviceNum[] = [10, 20, 40, 60, 80, 100];
  // lstm
  const deviceNumsLstm: number[] = [20, 40, 60, 80, 100];
  let map = new Map();
  // 保存accuracy、energy和penalty
  const requestAccuracyEnergy = async () => {
    // 循环发送参数请求no_lstm
    for (const count of deviceNums) {
      try {
        // 使用 await 确保按顺序执行每个请求
        const resNoLSTM = await dataSourceApi.getDoneTD3NoLSTM({
          count: count
        });
        // 将结果保存到 map 中
        map.set(`accuracy${count}_NoLSTM`, resNoLSTM.accuracy.flat());
        map.set(`energy${count}_NoLSTM`, resNoLSTM.energy.flat(2));
        map.set(`penalty${count}_NoLSTM`, resNoLSTM.penalty.flat());
        dataScreenStore.setTD3Map(map);
      } catch (error) {
        console.error(`Error fetching data for count ${count}:`, error);
      }
    }
  
  
    // 循环发送参数请求lstm
    for (const count of deviceNumsLstm) {
      try {
        // 使用 await 确保按顺序执行每个请求
        const resLSTM = await dataSourceApi.getDoneTD3LSTM({
          count: count
        });
        // 将结果保存到 map 中
        map.set(`accuracy${count}_LSTM`, resLSTM.accuracy);
        map.set(`energy${count}_LSTM`, resLSTM.energy);
        map.set(`penalty${count}_LSTM`, resLSTM.penalty);
        dataScreenStore.setTD3Map(map);
      } catch (error) {
        console.error(`Error fetching data for count ${count}:`, error);
      }
    }
  };
  
  // 保存rewards
  const requestRewards = async () => {
    const resNoLSTM = await dataSourceApi.getDoneTD3NoLSTMRewards();
    const resLSTM = await dataSourceApi.getDoneTD3LSTMRewards();
    map.set(`rewards40_NoLSTM`, resNoLSTM.rewards);
    map.set(`rewards40_LSTM`, resLSTM.rewards);
    dataScreenStore.setTD3Map(map);
    isLoading.value = false;
    // setTimeout(() => {
    //   isLoading.value = false;
    // }, 2000)
  };
  
  let isShowHeader = ref<boolean>(true);
  onMounted(() => {
    document.addEventListener('fullscreenchange', (event) => {
      if (document.fullscreenElement) {
        // 处理进入全屏模式的逻辑
        // isShowHeader.value = false;
        console.log('全屏 -- 进入')
      } else {
        // 处理退出全屏模式的逻辑
        // isShowHeader.value = true;
        console.log('全屏 -- 退出')
      }
    });
    requestAccuracyEnergy();
    setTimeout(() => {
      requestRewards()
    }, 100)
  })
  
  const dataBigScreenContainerRef = ref<HTMLDivElement | null>(null);
  const toggleScreenChange = () => {
    // if(dataBigScreenContainerRef.value == document.fullscreenElement) {
    //   document.exitFullscreen();
    //   isShowHeader.value = true;
    //   return;
    // }
    // dataBigScreenContainerRef.value.requestFullscreen();
    // isShowHeader.value = false;
  }
  
  let nowCom = ref(shallowRef(index3D));
  console.log('nowCom.value.name', nowCom.value.__name)
  
  let currentComMark = ref<string>('2D')
  
  const handleKeyPress = (event: KeyboardEvent) => {
    if (event.key === 'ArrowLeft' && currentComMark.value != '3D') {
      // 往左切3D模式
      currentComMark.value = '3D';
    } 
    if (event.key === 'ArrowRight' & currentComMark.value != '2D') {
      // 往右切2D模式
      currentComMark.value = '2D';
    }
  }
  
  onMounted(() => {
    window.addEventListener('keydown', handleKeyPress);
  })
  
  onBeforeUnmount(() => {
    window.removeEventListener('keydown', handleKeyPress);
  })
  
  watch(() => isShowHeader.value, (val) => {
    const commonSs = document.querySelectorAll('.commonS');
    let value = val ? '30vh' : '33.33vh';
    commonSs.forEach(item => {
      item.style.height = value;
    })
  })
  
  </script>
  
  <style scoped lang="scss">
  .dataBigScreenContainer {
    height: 100vh;
    // background-image: url('@/assets/images/screen/bg.jpg');
    background-image: url('https://pcms.huashijc.com/static/img/pageBg.f9f9dcd5.png');
    // background-image: url('@/assets/images/screen/dynamic-bg.gif');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  
  .main-box {
    color: #fff;
    // 头部区域
    .headerSection {
      // border: 1px solid red;
      height: 10vh;
      .head_t {
        height: 50%;
        background-image: url('@/assets/images/screen/head_bg.png');
        background-size: 100% 100%;
        text-align: center;
        line-height: 2rem;
        font-size: 1.5rem;
        .dataHeadSvg {
          // border: 1px solid red;
          width: 15rem;
          height: 2rem;
        }
      }
      .head_b {
        margin-top: .2rem;
        height: 50%;
        // border: 1px solid white;
        .head_b_left {
          position: relative;
          left: 0;
          width: 50%;
          height: 100%;
          // border: 1px solid red;
          .between-item-1 {
            position: absolute;
            left: -2rem;
            width: 50%;
            height: 4.5vh;
            background-color: rgb(15, 19, 37);
            transform: skew(50deg);
            line-height: 4.5vh;
            // padding-left: 2.5rem;
            text-align: center;
            font-size: 0.9rem;
            .content {
              transform: translateX(-10%) skew(-50deg);
            }
          }
          .around-item-1 {
            position: absolute;
            left: 25rem;
            width: 30%;
            // padding-left: 3rem;
            text-align: center;
            height: 4.5vh;
            background-color: rgb(15, 19, 37);
            transform: skew(50deg);
            line-height: 4.5vh;
            .content {
              transform: skew(-50deg);
            }
          }
        }
  
        .head_b_right {
          position: relative;
          right: 0;
          width: 50%;
          height: 100%;
          // border: 1px solid red;
          overflow: hidden;
          .between-item-2 {
            position: absolute;
            right: -2rem;
            width: 50%;
            height: 4.5vh;
            background-color: rgb(15, 19, 37);
            transform: skew(-50deg);
            line-height: 4.5vh;
            text-align: center;
            font-size: 0.9rem;
            .content {
              transform: translateX(-10%) skew(50deg);
            }
          }
          .around-item-2 {
            position: absolute;
            right: 25rem;
            width: 30%;
            padding-left: 3rem;
            height: 4.5vh;
            background-color: rgb(15, 19, 37);
            transform: skew(-50deg);
            line-height: 4.5vh;
            font-size: 0.9rem;
            .content {
              position: absolute;
              transform: skew(50deg);
              font-size: 0.8rem;
              &.weekDay {
                left: 6.5rem;
              }
            }
          }
        }
  
  
      }
    }
    // 图表内容区域
    .bodySection {
      // border: 1px solid red;
      width: 100%;
    }
  }
  
  /** 加载动画 -- 开始 */
  .loading {
    position: fixed;
    left: 0;
    top: 0;
    font-size: 18px;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    background: url('https://pcms.huashijc.com/static/img/pageBg.f9f9dcd5.png') center top;
    background-size: cover;
    text-align: center;
    color: #fff;
  }
  
  .load-box {
    position: absolute;
    width: 160px;
    height: 150px;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -75px;
    img {
      margin: 10px auto;
      display: block;
      width: 40px;
    }
  }
  /** 加载动画 -- 结束 */
  
  /* 渐变设置 */
  .fade-enter-from, .fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
  }
  .fade-enter-to, .fade-leave-from {
    opacity: 1;
  }
  .fade-enter-active {
    transition: all 0.7s ease;
  }
  .fade-leave-active {
     transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
  }
  </style>